// 权限拦截 导航守卫 路由守卫  router
import router from '@/router' // 引入路由实例
import store from '@/store' // 引入vuex store实例
import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式

router.beforeEach(async(to, from, next) => {
  // to and from are both route objects. must call `next`.
  NProgress.start() // 开启进度条
  // 判断有没有token
  const whiteList = ['/404', '/login'] // 定义白名单  所有不受权限控制的页面
  if (store.getters.token) {
    // 有token时候判断是否是去token页面, 是则返回首页, 不是则继续放行
    if (to.path === '/login') {
      next('/')
    } else {
      // 只有放行的时候才获取用户资料
      // 是每次都获取吗?
      // 如果当前的vuex中有用户的资料id 表示已经有资料了, 如果没有id才需要获取
      if (!store.getters.userId) {
        // async 函数所return的信息在await 可接收到
        const { roles } = await store.dispatch('user/getUserInfo')
        // 如果后续 需要根据用户资料信息获取数据的话 这里必须改成同步
        // 筛选用户的可用路由
        const routes = await store.dispatch('permission/filterRoutes', roles.menus) // 筛选得到当前用户可用的动态路由
        // 动态路由添加到路由表中  默认路由表只有 静态路由 没有动态路由

        // 使用addRoutes 必须使用next(地址)跳转, 不能直接用next()
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 添加动态路由添加到路由表
        // 添加完成路由之后
        next(to.path) // 相当于跳转到对应的地址  相当多做一次跳转  为什么要多做一次跳转?
        // 进门了, 但是进门之后我们要去的路还没铺好, 直接走, 掉坑里, 多做一次跳转, 再从门外往里进一次, 跳转之前把路铺好, 再次进来的时候, 路就铺好了
      } else {
        next()
      }
    }
  } else {
    // 这是在没有token的情况下, 还要判断是去白名单页面, 是就放行, 不是返回会登录页
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  NProgress.done() // 手动强制关闭一次  为了解决 手动切换地址时  进度条的不关闭的问题
})

// 后置守卫
router.afterEach(function() {
  NProgress.done() // 关闭进度条
})
